<template lang="pug">
  statics-echarts
</template>
<script>
import StaticsEcharts from './staticsEcharts'
import ClassDistribute from './classDistribute'
import AreaEcharts from './areaEcharts'
import { dashboard2 } from '@/api/dashboard'
export default {
  name: 'GardenDataStatics',
  components: {
    AreaEcharts,
    StaticsEcharts,
    ClassDistribute
  },
  data () {
    return {
      gradeList: []
    }
  },
  created () {
    this.getDashboard2()
  },
  methods: {
    getDashboard2 () {
      dashboard2().then(res => {
        this.gradeList = res.gradeCount
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.panel{
  background: #FAFAFA;
  border-radius: 30px;
  padding: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  position: relative;

  > h2 {
    padding-left: 20px;
    margin: 0;
    position: relative;
    font-size: 17px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #6E645A;
    line-height: 72px;
    line-height: 20px;
    margin-bottom: 20px;

    &::before{
      content: '';
      display: block;
      position: absolute;
      width: 5px;
      height: 20px;
      background: #6E645A;
      top: 0;
      left: 0;
    }
  }

}

.classDistribute{
  padding-bottom: 10px;

  .innerPanel{
    padding-bottom: 50px;
  }
}
</style>
